<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="content_top" style="padding-bottom: 5px">
            <el-form :inline="true" size="mini" label-width="10px;">
                <el-form-item label="状态:">
                    <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.orderStatus" clearable>
                        <el-option label="未支付" :value="-1"></el-option>
                        <el-option label="已支付" :value="0"></el-option>
                        <el-option label="已接单" :value="1"></el-option>
                        <el-option label="已完成" :value="2"></el-option>
                        <el-option label="已取消" :value="3"></el-option>
                        <el-option label="已退货" :value="4"></el-option>
                        <el-option label="已支付+已完成" :value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="员工:">
                    <el-select size="mini" placeholder="请选择" class="form-item" v-model="condition.employeeUserId" clearable>
                        <el-option v-for="item in employeeUserItems" :key="item.id" :label="item.nickName" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="站长:">
                    <el-select v-model="condition.siteId" class="form-item" filterable remote reserve-keyword clearable
                            placeholder="请输入关键词" :remote-method="loadSiteList" :loading="selectLoading">
                        <el-option
                                v-for="item in siteList"
                                :key="item.userId"
                                :label="item.siteName"
                                :value="item.userId">
                        </el-option>
                    </el-select>
                </el-form-item>
              <el-form-item label="小区:">
                <el-select v-model="condition.villageId" class="form-item" filterable remote reserve-keyword clearable
                           placeholder="请输入关键词" :remote-method="loadVillageItems" :loading="selectLoading">
                  <el-option
                      v-for="item in villageList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
                <el-form-item label="下单时间:">
<!--                    <el-date-picker v-model="condition.dateRange" style="margin-top: 5px" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">-->
<!--                    </el-date-picker>-->

                  <el-date-picker
                      v-model="condition.dateRange" style="margin-top: 5px"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                      type="datetimerange"
                      placeholder="选择日期时间"
                      :picker-options="pickerOptions" align="right">
                  </el-date-picker>

                </el-form-item>
              <el-form-item label="配送时间:">
                <el-date-picker
                    v-model="condition.distributionDateRange" style="margin-top: 5px"  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    type="datetimerange"
                    placeholder="选择日期时间"
                    :picker-options="pickerOptions" align="right">
                </el-date-picker>
              </el-form-item>
                <el-form-item label="联系人:">
                    <el-input v-model="condition.contacts" class="form-item"></el-input>
                </el-form-item>
                <el-form-item label="联系电话:">
                    <el-input v-model="condition.contactNumber" class="form-item"></el-input>
                </el-form-item>

                <div class="form-item" style="display: flex; justify-content: center; width: 100%; margin-top: 8px">
                    <el-button icon="el-icon-search" type="primary" size="mini" @click="loadList">查 询&nbsp;&nbsp;</el-button>

                    <el-button icon="el-icon-download" type="primary" size="mini" @click="onExport">导 出&nbsp;&nbsp;</el-button>
                </div>
            </el-form>
            <div style="padding-top:15px; padding-bottom: 8px; font-size: 16px; font-weight: bold; color: red; text-align: center">
                订单数：{{ statistics.goodsCount }}
                &nbsp;&nbsp;&nbsp;&nbsp;商品总额：{{ statistics.goodsAmount }}
<!--                &nbsp;&nbsp;&nbsp;&nbsp;应收总额：{{ statistics.receivableAmount }}-->
<!--                &nbsp;&nbsp;&nbsp;&nbsp;实收总额：{{statistics.actualAmount}}-->
                &nbsp;&nbsp;&nbsp;&nbsp;站长佣金：{{statistics.siteFee}}
                &nbsp;&nbsp;&nbsp;&nbsp;退货金额：{{statistics.returnAmount}}
            </div>
        </div>

        <el-table :data="data.data" border stripe highlight-current-row style="width: 100%" size="mini">
            <el-table-column type="index" header-align="center" align="center" width="44px"/>
            <el-table-column prop="orderId" label="订单号" header-align="center" align="center" width="150px">
                <template slot-scope="scope">
                    <el-button type="text" size="mini" @click="showDetail(scope.row.orderId)">{{ scope.row.orderId }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="houseNo" label="地址" header-align="center" align="center">
                <template slot-scope="scope">
                    {{ (scope.row.address ? scope.row.address : (scope.row.villageName ? scope.row.villageName : '')) + scope.row.houseNo }}
                </template>
            </el-table-column>
            <el-table-column prop="contacts" label="联系人" header-align="center" align="center" width="90px"/>
            <el-table-column prop="contactNumber" label="电话" header-align="center" align="center" width="100px"/>
            <el-table-column prop="goodsCount" label="商品数" header-align="center" align="center" width="60px;"/>
            <el-table-column prop="isCoupon" label="代金券" header-align="center" align="center" width="60px;">
                <template slot-scope="scope">
                    {{ scope.row.isCoupon === 1 ? "使用" : "未使用" }}
                </template>
            </el-table-column>
            <el-table-column prop="couponAmount" label="代金券" header-align="center" align="center" width="60px;">
                <template slot-scope="scope">
                    {{ scope.row.couponAmount ? scope.row.couponAmount : "-" }}
                </template>
            </el-table-column>
            <el-table-column prop="distributionFee" label="配送费" header-align="center" align="center" width="60px;"/>
            <el-table-column prop="discountAmount" label="优惠" header-align="center" align="center" width="60px;"/>
            <el-table-column prop="receivableAmount" label="应收" header-align="center" align="center" width="60px;"/>
            <el-table-column prop="actualAmount" label="实收" header-align="center" align="center" width="60px;"/>
            <el-table-column prop="returnAmount" label="退款" header-align="center" align="center" width="60px;"/>
            <el-table-column prop="siteFee" label="佣金" header-align="center" align="center" width="60px;">
                <template slot-scope="scope">
                    <span v-if="scope.row.siteFee === 0" style="color: gray">—</span>
                    <span v-if="scope.row.siteFee > 0 && scope.row.isToAccount === 0" style="color: red" title="未到账">{{ scope.row.siteFee}}</span>
                    <span v-if="scope.row.siteFee > 0 && scope.row.isToAccount === 1" style="color: green" title="已到帐">{{ scope.row.siteFee}}</span>
                </template>
            </el-table-column>
<!--            <el-table-column prop="distributionTimeName" label="配送时段" header-align="center" align="center" width="90px;"/>-->
            <el-table-column prop="createTime" label="下单时间" header-align="center" align="center" width="135px;"/>
            <el-table-column prop="distributionTime" label="配送时间" header-align="center" align="center" width="135px;"/>
            <el-table-column prop="distributionUserName" label="配送员" header-align="center" align="center" width="90px;"/>
            <el-table-column prop="orderStatus" label="状态" header-align="center" align="center" :formatter="formatter" width="60px;"/>
        </el-table>

        <div class="content_bottom" style="text-align: center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="condition.currentPage" :page-size="condition.pageSize" :total="data.total"
                           :page-sizes="[10, 15, 20, 30, 50, 80, 100]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
        </div>

        <el-dialog title="详情" :visible.sync="dialogVisible" width="80%" append-to-body>
            <div style="margin-bottom: 20px; color: grey; font-size: 12px; line-height: 25px">
                <table>
                    <tr>
                        <th>站长姓名：</th>
                        <td>{{ detail.site ? detail.site.siteName : '—'}}</td>
                        <th>站长电话：</th>
                        <td>{{ detail.site ? detail.site.phone : '—'}}</td>
                    </tr>
                    <tr>
                        <th>下单时间：</th>
                        <td>{{ detail.order.createTime}}</td>
                        <th>付款时间：</th>
                        <td>{{ detail.order.payTime}}</td>
                        <th>收单时间：</th>
                        <td>{{ detail.order.acceptTime}}</td>
                        <th>配送时间：</th>
                        <td>{{ detail.order.distributionTime}}</td>
                        <th>支付单号：</th>
                        <td>{{ detail.order.payOrderId}}</td>
                    </tr>
                    <tr>
                        <th>商品金额：</th>
                        <td>{{ detail.order.goodsAmount}}</td>
                        <th>优惠券：</th>
                        <td>{{ detail.order.couponAmount}}</td>
                        <th>配送费：</th>
                        <td>{{ detail.order.distributionFee}}</td>
                        <th>实收金额：</th>
                        <td>{{ detail.order.actualAmount}}</td>
                        <th>地址：</th>
                        <td>{{ (detail.order.address ? detail.order.address : (detail.order.villageName ? detail.order.villageName : '')) + detail.order.houseNo }}</td>
                    </tr>
                    <tr>
                        <th>站长佣金：</th>
                        <td>{{ detail.order.siteFee}}</td>
                        <th>是否到账：</th>
                        <td>{{ detail.order.isToAccount === 1 ? "已到帐" : "未到账"}}</td>
                        <th>是否有退货：</th>
                        <td>{{ detail.order.isReturn === 1 ? "有退货" : "未退货"}}</td>
                        <th>退货金额：</th>
                        <td>{{ detail.order.returnAmount}}</td>
                    </tr>
                </table>
            </div>
            <div>
                <el-table :data="detail.items" border stripe highlight-current-row style="width: 100%" size="mini">
                    <el-table-column type="index" header-align="center" align="center" width="60px"/>
                    <el-table-column prop="depotNo" label="库存编码" header-align="center" align="center" width="150px;"/>
                    <el-table-column prop="name" label="商品名称" header-align="center" align="center"/>
                    <el-table-column prop="unitPrice" label="单价" header-align="center" align="center" width="70px;"/>
                    <el-table-column prop="weight" label="重量(克)" header-align="center" align="center" width="70px;"/>
                    <el-table-column prop="price" label="售价" header-align="center" align="center" width="85px;"/>
                    <el-table-column prop="promotion" label="促销类型" header-align="center" align="center" width="70px">
                        <template slot-scope="scope">
                            {{ scope.row.promotion === 0 ? '无' : (scope.row.promotion === 1 ? '特价' : '限购')}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="promotionPrice" label="促销价" header-align="center" align="center" width="65px"/>
                    <el-table-column prop="promotion" label="退货状态" header-align="center" align="center" width="70px">
                        <template slot-scope="scope">
                            {{ scope.row.returnStatus === 0 ? '—' : (scope.row.returnStatus === 1 ? '审核中' : (scope.row.returnStatus === 2 ? '已通过' : '已拒绝'))}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="returnAmount" label="退货金额" header-align="center" align="center" width="70px"/>
                </el-table>
            </div>
        </el-dialog>

    </div>

</template>

<script>
    import {download} from "@/api/file/file"
    import {orderList, orderDetail, statisticsByDay} from '@/api/order/order'
    import {employeeUserItems} from '@/api/employee/user'
    import {getSiteList} from '@/api/site/site'
    import {villageList} from '@/api/base/village'

    export default {
        name: 'Order',
        data() {
            return {
              pickerOptions: {
                shortcuts: [{
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  }
                }, {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                }]
              },
                loading: false,
                selectLoading: false,
                dialogVisible: false,
                siteList: [],
                employeeUserItems: [],
                villageList: [],
                condition: {
                    currentPage: 1,
                    pageSize: 30,
                    orderStatus: null,
                    employeeUserId: null,
                    dateRange: [],
                    distributionDateRange: [],
                    villageId: null,
                    start: null,
                    end: null,
                    contacts: null,
                    contactNumber: null,
                    isReturn: null
                },
                detail: {
                    order: {},
                    items: []
                },
                data: {},
                statistics: {
                    goodsCount: 0,
                    goodsAmount: 0,
                    receivableAmount: 0,
                    actualAmount: 0,
                }
            }
        },
        computed: {},
        mounted() {
            this.loadEmployeeUserItems()
            this.loadList()
        },
        methods: {
          async loadVillageItems(query) {
            this.selectLoading = true

            let param = {
              pageSize: 100, currentPage: 1, name: query, communityId: null
            }

            villageList(param).then((res) => {
              this.villageList = res.data
              this.selectLoading = false
            })
          },
            async loadSiteList(query) {
                if (query.length >= 2) {
                    this.selectLoading = true
                    getSiteList({pageSize: 10, currentPage: 1, keyword: query}).then((res) => {
                        this.siteList = res.data
                        this.selectLoading = false
                    })
                }
            },
            async loadEmployeeUserItems() {
                let res = await employeeUserItems({type: 1});
                this.employeeUserItems = res.data
            },
            handleSizeChange(val) {
                this.condition.pageSize = val
                this.loadList()
            },
            handleCurrentChange(val) {
                this.condition.currentPage = val
                this.loadList()
            },
            formatter(row, column) {
                if (column.property === 'orderStatus') {
                    switch (row.orderStatus) {
                        case -1:
                            return '未支付'
                        case 0:
                            return '已支付'
                        case 1:
                            return '已接单'
                        case 2:
                            return '已完成'
                        case 3:
                            return '已取消'
                        case 4:
                            return '已退货'
                    }
                }
            },
            async loadList() {
                this.loading = true
                let params = JSON.parse(JSON.stringify(this.condition))
                if (this.condition.dateRange && this.condition.dateRange.length > 0) {
                    params.start = this.condition.dateRange[0]
                    params.end = this.condition.dateRange[1]
                    params.dateRange = null
                }
                if (this.condition.distributionDateRange && this.condition.distributionDateRange.length > 0) {
                    params.distributionStart = this.condition.distributionDateRange[0]
                    params.distributionEnd = this.condition.distributionDateRange[1]
                    params.distributionDateRange = null
                }
                this.loadStatisticsByDay(params)
                let res = await orderList(params)
                this.loading = false
                if (res.code !== "0") return
                this.data = res
            },
          onExport() {
            let params = JSON.parse(JSON.stringify(this.condition))
            if (this.condition.dateRange && this.condition.dateRange.length > 0) {
              params.start = this.condition.dateRange[0]
              params.end = this.condition.dateRange[1]
              params.dateRange = null
            }
            if (this.condition.distributionDateRange && this.condition.distributionDateRange.length > 0) {
              params.distributionStart = this.condition.distributionDateRange[0]
              params.distributionEnd = this.condition.distributionDateRange[1]
              params.distributionDateRange = null
            }
            if (!params.start) {
              return this.$message.warning("请选择开始日期")
            }
            if (!params.end) {
              return this.$message.warning("请选择截止日期")
            }
            download('order/export/list', params, '订单列表-' + new Date() / 1000 + ".xls");
          },
            async loadStatisticsByDay(params) {
                let res = await statisticsByDay(params)
                if (res.code !== "0") return
                this.statistics = res.data
            },
            async showDetail(id) {
                this.loading = true
                let res = await orderDetail(id)
                this.loading = false
                if (res.code !== "0") return

                this.detail = res.data
                this.dialogVisible = true
            }
        }
    }
</script>

<style scoped>
    >>> .el-dialog__body {
        padding: 10px 20px;
        color: #606266;
        font-size: 14px;
    }

    td {
        padding-right: 10px;
    }

</style>
